<template>
  <div style="width: 96%; margin-left: 2%;">
    <el-divider content-position="left">用户列表</el-divider>
    <el-card style="margin-top: 30px;" shadow="always">
      <el-table :data="userInfoData" height="450" border style="width: 100%"
        :default-sort="{prop: 'createTime', order: 'descending'}">
        <el-table-column fixed prop="nickName" label="昵称" width="180">
        </el-table-column>
        <el-table-column prop="phoneNumber" label="手机号" width="180">
        </el-table-column>
        <el-table-column prop="reallyName" label="真实姓名" width="180">
        </el-table-column>
        <el-table-column prop="emailAddress" label="邮箱地址" width="180">
        </el-table-column>
        <el-table-column prop="createTime" sortable label="创建时间" width="180">
        </el-table-column>
        <el-table-column prop="black" label="是否黑名单" width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.black == 0">不是黑名单</span>
            <span v-if="scope.row.black == 1">是黑名单</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-pagination style="text-align: right;margin-top: 20px;" background layout="prev, pager, next"
            :total="tiketTableDataDetails.length">
          </el-pagination> -->
    </el-card>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    filters: {

    },
    data() {
      return {
        userInfoData: []
      }
    },
    created() {
      this.initUserInfoData()
    },
    methods: {
      initUserInfoData() {
        let vm = this
        axios({
          url: process.env.BASE_API + `/user-info-service/userInfo/queryAllUserInfo`,
          method: 'get'
        }).then(function(res) {
          if (res.data.success) {
            vm.userInfoData = res.data.data.userInfos
            vm.$message.success(res.data.message)
          } else {
            vm.$message.warning(res.data.message)
          }
        })
      }
    }
  }
</script>
